<template>
  <el-form
    ref="ruleFormRef"
    style="max-width: 600px"
    :model="ruleForm"
    :rules="rules"
    label-width="auto"
    class="demo-ruleForm"
    :size="formSize"
    status-icon
  >
    <el-form-item label="角色ID" prop="id">
      <el-input v-model="ruleForm.id" />
    </el-form-item>
    <el-form-item label="角色名称" prop="name">
      <el-input v-model="ruleForm.name" />
    </el-form-item>
    <el-form-item label="角色编码" prop="code">
      <el-input v-model="ruleForm.code" />
    </el-form-item>

    <el-form-item label="角色状态" prop="status">
      <el-switch
        v-model="ruleForm.status"
        inline-prompt
        active-text="启用"
        inactive-text="禁用"
        :active-value="1"
        :inactive-value="0"
      />
    </el-form-item>

    <!-- <el-form-item label="Activity zone" prop="region">
          <el-select v-model="ruleForm.region" placeholder="Activity zone">
            <el-option label="Zone one" value="shanghai" />
            <el-option label="Zone two" value="beijing" />
          </el-select>
        </el-form-item>
        <el-form-item label="Activity count" prop="count">
          <el-select-v2 v-model="ruleForm.count" placeholder="Activity count" :options="options" />
        </el-form-item>
        <el-form-item label="Activity time" required>
          <el-col :span="11">
            <el-form-item prop="date1">
              <el-date-picker
                v-model="ruleForm.date1"
                type="date"
                aria-label="Pick a date"
                placeholder="Pick a date"
                style="width: 100%"
              />
            </el-form-item>
          </el-col>
          <el-col class="text-center" :span="2">
            <span class="text-gray-500">-</span>
          </el-col>
          <el-col :span="11">
            <el-form-item prop="date2">
              <el-time-picker
                v-model="ruleForm.date2"
                aria-label="Pick a time"
                placeholder="Pick a time"
                style="width: 100%"
              />
            </el-form-item>
          </el-col>
        </el-form-item> -->

    <!-- <el-form-item label="Activity location" prop="location">
          <el-segmented v-model="ruleForm.location" :options="locationOptions" />
        </el-form-item>
        <el-form-item label="Activity type" prop="type">
          <el-checkbox-group v-model="ruleForm.type">
            <el-checkbox value="Online activities" name="type"> Online activities </el-checkbox>
            <el-checkbox value="Promotion activities" name="type">
              Promotion activities
            </el-checkbox>
            <el-checkbox value="Offline activities" name="type"> Offline activities </el-checkbox>
            <el-checkbox value="Simple brand exposure" name="type">
              Simple brand exposure
            </el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item label="Resources" prop="resource">
          <el-radio-group v-model="ruleForm.resource">
            <el-radio value="Sponsorship">Sponsorship</el-radio>
            <el-radio value="Venue">Venue</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="Activity form" prop="desc">
          <el-input v-model="ruleForm.desc" type="textarea" />
        </el-form-item> -->

    <el-form-item>
      <el-button
        type="primary"
        :disabled="props.disabled"
        :loading="props.loading"
        @click="props.submitForm(ruleFormRef)"
      >
        Create
      </el-button>
      <el-button @click="reset">Reset</el-button>
    </el-form-item>
  </el-form>
</template>

<script setup lang="ts">
import { type RolesType, requestGetRolesPage, addRole, editRole } from '@/service/study5/demo2'
import { reactive, ref, watch } from 'vue'
import { ElMessage, type ComponentSize, type FormInstance, type FormRules } from 'element-plus'

const ruleFormRef = ref<FormInstance>()

// type RolesType = {
//   code: string
//   createTime?: string
//   id?: number
//   name: string
//   sort: number
//   status: number
// }

let resetFormData: RolesType = {
  code: '',
  createTime: '',
  name: '',
  sort: 1,
  status: 1
}

const props = defineProps<{
  formData: RolesType
  disabled: boolean
  loading: boolean
  submitForm: (a: any) => void
}>()

const formSize = ref<ComponentSize>('default')

const rules = reactive<FormRules<RolesType>>({
  id: [{ required: true, message: '不可以为空', trigger: 'blur' }],
  name: [{ required: true, message: '不可以为空', trigger: 'blur' }],
  code: [{ required: true, message: '不可以为空', trigger: 'blur' }],
  status: [{ required: true, message: '不可以为空', trigger: 'blur' }]
  // region: [
  //   {
  //     required: true,
  //     message: 'Please select Activity zone',
  //     trigger: 'change'
  //   }
  // ],
  // count: [
  //   {
  //     required: true,
  //     message: 'Please select Activity count',
  //     trigger: 'change'
  //   }
  // ],
  // date1: [
  //   {
  //     type: 'date',
  //     required: true,
  //     message: 'Please pick a date',
  //     trigger: 'change'
  //   }
  // ],
  // date2: [
  //   {
  //     type: 'date',
  //     required: true,
  //     message: 'Please pick a time',
  //     trigger: 'change'
  //   }
  // ],
  // location: [
  //   {
  //     required: true,
  //     message: 'Please select a location',
  //     trigger: 'change'
  //   }
  // ],
  // type: [
  //   {
  //     type: 'array',
  //     required: true,
  //     message: 'Please select at least one activity type',
  //     trigger: 'change'
  //   }
  // ],
  // resource: [
  //   {
  //     required: true,
  //     message: 'Please select activity resource',
  //     trigger: 'change'
  //   }
  // ],
  // desc: [{ required: true, message: 'Please input activity form', trigger: 'blur' }]
})

const ruleForm = ref<RolesType>(props.formData)

watch(
  () => props.formData,
  (nVal) => {
    console.log(nVal, 'ruleFormruleFormruleForm')
    ruleForm.value = nVal
    resetFormData = JSON.parse(JSON.stringify(nVal))
    console.log(resetFormData, 'resetFormData')
  },
  {
    immediate: true
  }
)

// watch(ruleForm, (nVal) => {
//   console.log(nVal, 'reffffruleFormruleFormruleForm')
// })

//  手动重置表单数据（不使用 表单组件抛出的方法重置）
const resetFieldsData = () => {
  ruleForm.value = JSON.parse(JSON.stringify(resetFormData))

  console.log(resetFormData, 'resetFormDataresetFormData')

  console.log('重置表单数据')
}

const reset = () => {
  resetFieldsData()
  ruleFormRef.value?.clearValidate()
}

defineExpose({
  reset,
  resetFieldsData
})
</script>

<style></style>
